<template>
  <el-row v-show="hasDisease">
    <el-col :span="20" />
    <el-col :span="4">
      <el-button size="small" @click="handleIndividualDiseaseInformationDialog">处理</el-button>
      <el-button v-show="cancelshow" size="small" @click="cancelDialog">取消</el-button>
      <el-dialog :close-on-click-modal="false"  title="个体病害信息" :visible.sync="individualDiseaseInformationDialog">
        <el-form :model="diseaseForm " label-position="left" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="设施名称:">
                <el-input v-model="diseaseForm.facilityName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="个体名称:">
                <el-input v-model="diseaseForm.facilityName" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="处理方式:">
                <el-input v-model="diseaseForm.facilityName" style="width:90%" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="处理结果:">
                <el-input v-model="diseaseForm.facilityName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理日期:">
                <el-input v-model="diseaseForm.facilityName" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="submitDiseaseInformation">确定</el-button>
        </div>
      </el-dialog>
      <el-dialog :close-on-click-modal="false"  title="作废提示" :visible.sync="cancelClueDialog">
        <p>
          <strong>确定废除此任务吗</strong>
        </p>
        <p>任务废除后无法处理</p>
        <div slot="footer">
          <el-button type="primary" @click="submitcancelClueDialog">确定</el-button>
        </div>
      </el-dialog>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "DiseasBar",
  props: {
    // eslint-disable-next-line vue/require-prop-types
    hasDisease: {
      default: true
    },
    // eslint-disable-next-line vue/require-prop-types
    cancelshow: {
      default: false
    }
  },
  data() {
    return {
      individualDiseaseInformationDialog: false,
      cancelClueDialog: false,
      diseaseForm: {}
    };
  },
  methods: {
    handleIndividualDiseaseInformationDialog() {
      this.individualDiseaseInformationDialog = true;
    },
    cancelDialog() {
      this.cancelClueDialog = true;
    },
    submitDiseaseInformation() {
      this.individualDiseaseInformationDialog = false;
    },
    submitcancelClueDialog() {
      this.cancelClueDialog = false;
    }
  }
};
</script>

<style scoped lang="scss">
@import "~@/styles/variables.scss";
::v-deep .el-dialog__body {
  background: #0085a0;
  .el-input {
    width: 200px;
  }
}

::v-deep .el-button {
  margin: 0;
}
::v-deep .el-row {
  margin: 5px;
  .el-col {
    min-height: 1px;
  }
}
</style>
